<template>
  <div class="financial-info">
    <!-- 财务信息 -->
    <div class="table-data-title">
      <div class="text">
        <span class="stress">*</span>{{ $t('shopProcess.add') }}&nbsp;{{ $t('shopProcess.settlementAccount') }}
      </div>
      <div class="tips">
        {{ $t('shopProcess.added') }}
        <span class="txt-bold">{{ bankCartInfoForm.data.length }}</span>
        {{ $t('shopProcess.piece') }}&nbsp;{{ $t('shopProcess.settlementAccount') }}，{{ $t('shopProcess.mostAdd') }}
        <span class="txt-bold">{{ maxNumOfbank }}</span>
        {{ $t('shopProcess.piece') }}&nbsp;{{ $t('shopProcess.settlementAccount') }}，{{ $t('shopProcess.settlementAccountEditTips') }}
      </div>
    </div>
    <!-- <el-button class="add-bths" type="primary" size="small" @click="addBankInfo()">{{$t('shopProcess.createAccount')}}</el-button> -->
     <div class="add-bths"></div>
      <!-- 添加图表 -->
    <el-form @submit.native.prevent
      ref="bankCartInfoForm"
      :model="bankCartInfoForm"
      :rules="bankCartInfoForm.rule"
      size="small"
    >
      <el-table
        ref="settlementAccountsTable"
        :data="bankCartInfoForm.data"
        header-cell-class-name="table-header"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          :label="this.$i18n.t('brand.serialNumber')"
          width="80"
        />
        <el-table-column
          prop="bankName"
          :label="this.$i18n.t('shopProcess.bankName')"
        >
          <template slot-scope="scope">
            <el-form-item
              :prop="'data.' + scope.$index + '.bankName'"
              :rules="bankCartInfoForm.rule.bankName"
            >
              <el-input
                v-model="scope.row.bankName"
                :placeholder="$t('shopProcess.brandNameInputTips')"
                maxlength="20"
                @blur="
                  scope.row.bankName =
                  scope.row.bankName ?
                  removeHeadAndTailSpaces(scope.row.bankName) :
                  scope.row.bankName
                "
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="recipientName"
          :label="this.$i18n.t('shopProcess.recipientName')"
        >
          <template slot-scope="scope">
            <el-form-item
              :prop="'data.' + scope.$index + '.recipientName'"
              :rules="bankCartInfoForm.rule.recipientName"
            >
              <el-input
                v-model="scope.row.recipientName"
                maxlength="20"
                :placeholder="$t('shopProcess.recipientNameInputTips')"
                @blur="
                  scope.row.recipientName =
                  scope.row.recipientName ?
                  removeHeadAndTailSpaces(scope.row.recipientName) :
                  scope.row.recipientName
                "
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="cardNo"
          :label="this.$i18n.t('shopProcess.account')"
        >
          <template slot-scope="scope">
            <el-form-item
              :prop="'data.' + scope.$index + '.cardNo'"
              :rules="bankCartInfoForm.rule.cardNo"
            >
              <el-input v-model="bankCartInfoForm.data[0].cardNo" @input="handleInput" maxlength="19" :placeholder="$t('shopProcess.cardNoInputTips')" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="openingBank"
          :label="this.$i18n.t('shopProcess.openingBank')"
        >
          <template slot-scope="scope">
            <el-form-item
              :prop="'data.' + scope.$index + '.openingBank'"
              :rules="bankCartInfoForm.rule.openingBank"
            >
              <el-input
                v-model="scope.row.openingBank"
                :placeholder="$t('shopProcess.branchInputTips')"
                maxlength="20"
                @blur="
                  scope.row.openingBank =
                  scope.row.openingBank ?
                  removeHeadAndTailSpaces(scope.row.openingBank) :
                  scope.row.openingBank
                "
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column width="50">
          <template slot-scope="scope">
            <i v-if="bankCartInfoForm.data.length > 1" class="el-icon-remove-outline" @click="deleteBankInfoItem(scope.$index)" />
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <!-- /财务信息 -->

    <div class="foot-btn">
      <el-button type="infor" size="small" @click="preStep">{{$t('shopProcess.previousStep')}}</el-button>
      <el-button type="primary" size="small" @click="nextStep">{{$t('brand.createShop')}}</el-button>
    </div>
  </div>
</template>

<script>
import { validNoEmptySpace, removeHeadAndTailSpaces } from '@/utils/validate'
export default {
  data () {
    const validEmptyTab = (rule, value, callback) => {
      if (validNoEmptySpace(value)) {
        callback(new Error(this.$i18n.t('shopProcess.inputAllSpace')))
      } else {
        callback()
      }
    }

    const validateCardNo = (rule, value, callback) => {
      if (!(/^([0-9]{1})(\d{12,18})$/).test(value)) {
        callback(new Error(this.$i18n.t('shopProcess.cardNoErrorTips')))
      } else {
        callback()
      }
    }
    return {
      removeHeadAndTailSpaces: removeHeadAndTailSpaces,
      // 结算账户最大可添加数
      maxNumOfbank: 1,

      bankCartInfoForm: {
        // 添加的结算账户列表
        data: [
          {
            bankName: '',
            recipientName: '',
            cardNo: '',
            openingBank: ''
          }
        ],
        rule: {
          bankName: [
            { required: true, message: this.$i18n.t('shopProcess.brandNameNotEmpty'), trigger: 'blur' },
            { min: 2, max: 20, message: this.$i18n.t('shopProcess.brandNameErrorTips'), trigger: 'blur' },
            { validator: validEmptyTab, trigger: 'blur' }
          ],
          recipientName: [
            { required: true, message: this.$i18n.t('shopProcess.recipientNameNotEmpty'), trigger: 'blur' },
            { min: 2, max: 20, message: this.$i18n.t('shopProcess.recipientNameInputTips'), trigger: 'blur' },
            { validator: validEmptyTab, trigger: 'blur' }
          ],
          cardNo: [
            { required: true, message: this.$i18n.t('shopProcess.accountNotEmpty'), trigger: 'blur' },
            { validator: validateCardNo, trigger: 'blur' },
            { validator: validEmptyTab, trigger: 'blur' }
          ],
          openingBank: [
            { required: true, message: this.$i18n.t('shopProcess.openingBankNotEmpty'), trigger: 'blur' },
            { min: 2, max: 20, message: this.$i18n.t('shopProcess.openingBankErrorTips'), trigger: 'blur' },
            { validator: validEmptyTab, trigger: 'blur' }
          ]
        }
      }
    }
  },

  mounted () {},

  methods: {
    handleInput(){
      this.bankCartInfoForm.data[0].cardNo=this.bankCartInfoForm.data[0].cardNo.replace(/[^\d]/g,'')
    },
    /**
     * 获取银行卡列表
     */
    getBankCartInfo () {
      this.$http({
        url: this.$http.adornUrl(`/platform/shopBankCard/listByShopId`),
        method: 'get',
        params: this.$http.adornParams({
          // shopId
        })
      }).then(({ data }) => {
        this.bankCartInfoForm.data = data
        if (this.bankCartInfoForm.data === null || this.bankCartInfoForm.data.length === 0) {
          this.bankCartInfoForm.data = [
            {
              bankName: '',
              recipientName: '',
              cardNo: '',
              openingBank: ''
            }
          ]
        }
      })
    },
    /**
     * 增加银行信息项
     */
    addBankInfo () {
      if (this.bankCartInfoForm.data.length < 5) {
        this.bankCartInfoForm.data.push(
          {
            bankName: '',
            recipientName: '',
            cardNo: '',
            openingBank: ''
          }
        )
      } else {
        this.$message({
          message: this.$i18n.t('shopProcess.cardMaxLimitTips'),
          type: 'error',
          duration: 1000
        })
        // this.$message.error('最多可添加5个结算账户')
      }
    },

    /**
     * 删除银行信息项
     * @param {Number} index 索引
     */
    deleteBankInfoItem (index) {
      this.bankCartInfoForm.data.splice(index, 1)
    },

     // 上一步
    preStep () {
      this.$emit('preStep')
    },
    /**
     * 不合规表单数据 拦截
     */
    formVoidInterdiction () {
      let fn = new Promise((resolve, reject) => {
        this.$refs['bankCartInfoForm'].validate(async (valid) => {
          valid ? resolve() : reject()
        })
      })
      return fn
    },
    // 下一步,提交
    nextStep () {
      this.$refs['bankCartInfoForm'].validate((valid) => {
        if (!valid) return
        this.$emit('nextStep', this.bankCartInfoForm.data)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// 财务信息
.financial-info {
  margin: 30px 0;
}

// 表格上的标题
.table-data-title {
  display: flex;
  align-items: center;
  .text {
    font-size: 16px;
    // min-width: 80px;
    .stress {
      color: #FF2120;
      padding-right: 5px;
    }
  }
  .tips {
    font-size: 12px;
    color: #999;
    margin-left: 10px;
    .txt-bold {
      color: #333;
    }
  }
  .edit-btn {
    width: 117px;
    height: 30px;
    line-height: 28px;
    font-size: 14px;
    color: #1890FF;
    background: #FFFFFF;
    text-align: center;
    border: 1px solid #1890FF;
    border-radius: 2px;
    box-sizing: border-box;
    margin-left: auto;
    cursor: pointer;
  }
}
.add-bths {
  margin: 15px 0;
}
.foot-btn {
  margin: 30px 140px;
}
::v-deep .el-form-item--small .el-form-item__content {
  margin-top: 16px;
}
</style>
